<!--
 * @Description: 
 * @Author: nxd
 * @Date: 2023-01-04 15:17:39
 * @LastEditors: nxd
 * @LastEditTime: 2023-02-20 11:09:48
-->
<template>
    <div class="table">
        <div class="about">
            <var-app-bar :elevation="false" color="white" title="实名认证" title-position="center" text-color="#000000">
                <template #left>
                    <var-button @click="resetup" color="transparent" text-color="#ffffff" round text>
                        <var-icon color="#D3D3D3" name="chevron-left" :size="24" />
                    </var-button>
                </template>
            </var-app-bar>
        </div>
        <div class="slogan">
            <var-app-bar :elevation="false" text-color="blue " color="#F0F8FF" round title-position="center"
                title="以下信息均为必填项，为保证您的利益，请您如实填写" />
        </div>

        <div class="text">
            <var-app-bar :elevation="false" text-color="black" color="white" title="真实姓名" title-position="left">
                <template #right>
                    <var-input type="text" :hint="false" :line="false" placeholder="请保持和证件名一样" v-model="form.name" />
                </template>
            </var-app-bar>

            <var-app-bar :elevation="false" text-color="black" color="white" title="证件号码" title-position="left">
                <template #right>
                    <var-input type="number" :hint="false" :line="false" placeholder="请填写证件上的号码" v-model="form.idnumber" />
                </template>
            </var-app-bar>
            <var-app-bar :elevation="false" text-color="black" color="white" title="证件类型" title-position="left">
                <template #right>居民二代身份证&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                    <!-- <var-icon color="#D3D3D3" name="chevron-right" :size="24" /> -->
                </template>
            </var-app-bar>
            <!-- <div class="upload01"> -->
            <var-image src="./img/Idcard01.png" alt="" class="img01"/>
            <div class="upload01">
                <var-uploader v-model="files01" :maxsize="1024000000"  accept="image/*" maxlength="1" />
            </div>
            <br>
            <!-- <div class="upload02"> -->
            <var-image src="./img/Idcard02.png" alt="" class="img02"/>
            <div class="upload02">
                <var-uploader v-model="files02" :maxsize="1024000000"   accept="image/*" maxlength="1"/>
            </div>
        </div>
        <br>
    </div>
    <br>
        <p class="note">身份信息用于发布公开笔记，钱包提现等</p>
    <br>
    <div class="button">
        
        <var-button @click='submit()'  block type="primary">提交认证</var-button>
        
    </div>
</template>


<script setup>
import router from '../../../router/index'
import { Snackbar } from '@varlet/ui'
import { ref,reactive,toRaw } from 'vue'
import { storeToRefs } from 'pinia';
import { useIdentityRelStore } from '@/stores/identity'
const identityStore = useIdentityRelStore()



function resetup() {
    router.push('/setup')
    console.log('返回个人设置页');

};
const { IdentityRel } = identityStore
const form = reactive({
  name: "",
  idnumber:"",
});
const files01 = ref("")

const files02 = ref("")

const submit = () =>{
    let name = form.name
    let idNumber = form.idnumber
    IdentityRel(name,idNumber)
}

</script>
<style lang="less" >
.table {
    background-color: #ffffff;

    .about {
        .var-app-bar {
            height: 60px;
        }

        .var-app-bar__title {
            font-weight: 500;
            font-size: 18px;

        }
    }

    .slogan {
        font-size: 10px;
        background-color: white;
        height: 45px;

        .var-app-bar {
            border-radius: 10px;
            height: 30px;
            width: 360px;
            left: 15px
        }
    }

    .text {
        .var-app-bar {
            .var-input {
                margin-left: 50px
            }
        // .id{
        //     .var-app-bar{
        //    :root{
        //     --app-bar-right-gap: 20px;
        //    }
        //     .var-app-bar__right{
        //         right: var(--app-bar-right-gap);
        //     }
        // }
        // }
        }
        

    }

    .upload01{
        
        
        display: inline-block;
        // margin-left: 100px;
        // transform:translateY(-50%);
        // position:relative
        .var-uploader{
            margin-left: 240px;
            transform:translateY(-120%);
            position:fixed
            
        }
        .var-uploader__action{
        width:120px;
        background-color: #ffffff
    }
    
    }

    .img01 {
        // display: inline-block;
        height: 100px;
        margin-top: 30px;
        margin-left: 30px;
        width:120px
    }
}

.upload02 {
    display: inline-block;
    // margin-left: 80px;
    // transform:translateY(-60%)
    .var-uploader{
        
        margin-left: 240px;
        transform:translateY(-120%);
        position:fixed
        
            
        }
    .var-uploader__action{
        width:120px;
        background-color: #ffffff
    }
}

.img02 {
    // display: inline-block;
    height: 100px;
    margin-top: 20px;
    margin-left: 10px;
    width:150px
}
.note{
   font-size:10px;
   margin-left:80px;
   color:grey
}
.button{
    .var-button{
        width:300px;
        height:50px;
        transform:translateX(15%)
        
    }
}
</style>